<template>
    <div class="sdy-search-list">
        <ul>
            <li @click="handler" v-for="item in searchList" :key="item.proid">
                {{item.brand}}
                <p>
                    <van-tag type="warning" size="medium">标签</van-tag>
                    <van-tag type="warning" size="medium">标签</van-tag>
                    <van-tag type="warning" size="medium">标签</van-tag>
                </p>
            </li>
        </ul>
    </div>
</template>
<script setup lang="ts">

import { inject } from 'vue';
//导入相关 ts 接口
import type { MyHotItem } from '@/config/interface'
// 导入相关路由
import { useRouter ,type Router} from 'vue-router'

const searchList = inject<MyHotItem[]>('searchList')
// console.log(searchList);

const $router:Router=useRouter()
// 跳转到 商品列表 (跳转路由)
const  handler=(e:Event)=>{
    const text = (e.target as HTMLDListElement).innerText
     console.log(text);
    // 需要跳转路由，携带 text 去到商品列表页
    $router.push({ path: '/goodlist', query: { search: text } })
}

</script>

<style scoped lang="scss">
li {
    height: 40px;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}
</style>